<template>
  <div class="sanstyle" style="position: relative">
    <!--左边 B-->
    <div>
      <div class="ssl">
        <!--标题 B-->
        <div class="sstitle">
          <div class="twz">
            <span class="dwz">调查工作</span>
            <br/>
            <span class="xwz">The investigation</span>
          </div>
        </div>
        <!--标题 E-->

        <!--调查次数B-->
        <div class="tccs">
          <div>
            <div><span style="color: white;font-size: .18rem;">调查工作次数</span></div>
            <div><span style="color: #2EFFF2;font-size: .36rem;">{{surveyNum}}</span><span
              style="color: white;font-size: .18rem;">次</span>
            </div>
            <div><img src="/static/images/cytc.png" alt=""></div>
          </div>


          <div>
            <div><span style="color: white;font-size: .18rem;">参与调查人次</span></div>
            <div><span style="color: #34CEFF;font-size: .36rem;">{{personNum}}</span><span
              style="color: white;font-size: .18rem;">次</span>
            </div>
            <div><img src="/static/images/tcry.png" alt=""></div>
          </div>


        </div>
        <!--调查次数E-->

        <div style="height: .3rem;"></div>
        <!--标题 B-->
        <div class="sstitle">
          <div class="twz">
            <span class="dwz">本底资源库</span>
            <br/>
            <span class="xwz">Background resource library</span>
          </div>
        </div>
        <!--标题 E-->

        <!--资源列表 B-->
        <div class="zylb">

          <!--搜索 B-->
          <div class="ssk">
            <input type="text" v-model="keyword"/>
            <img @click="getSpecies()" style="cursor: pointer" src="/static/images/ss.png" alt="">
          </div>
          <!--搜索 E-->

          <!--列表B-->
          <div class="zyList">
            <div style="background-color:  rgba(46, 255, 242, 0.4);">
              <div v-for="(item,index) in lbList" :key="index">
                <span @click="qhlx(item)"
                      :style="item.sts?'border-bottom: .03rem solid #2EFFF2;':'border:none'">{{item.name}}</span>
              </div>
            </div>
          </div>
          <!--列表E-->

          <!--真正的列表 B-->
          <div class="zzlb">
            <div v-for="(item,index) in listn" :key="index" :style="item.sts?'color:#2EFFF2':'color: white'"
                 @click="lookz(item)">
              <div><span :title="item.zhong">{{item.zhong}}</span></div>
              <div><span>{{item.level}}</span></div>
              <div><span @click="looki(item)" class="icon iconfont icon-Vector"></span></div>
            </div>
          </div>
          <!--真正的列表 E-->

        </div>
        <!--资源列表 E-->

      </div>
    </div>
    <!--左边 E-->
    <!--中间 B-->
    <div style="position: relative">
      <div class="bzxq">
        <div v-for="(item,index) in tclist" :key="index">
          <div><img :src="item.ico" alt=""></div>
          <div>
            <span :style="{color: item.color}">{{item.num}}</span>
            <br/>
            <span>{{item.name}}</span>
          </div>
        </div>
      </div>

      <!--分布类型 B-->
      <div class="fblx" style="left: .34rem;width: 1.4rem;">
        <div>
          <img src="/static/images/green.png" alt="">
          <div
            style="width: 1rem;height: .4rem;line-height: .4rem;text-align: center;white-space:nowrap;overflow: hidden;text-overflow:ellipsis;">
            {{SpeciesObj.zhong}}
          </div>
        </div>
      </div>
      <div class="fblx" style="width: 2.4rem;left: 2.2rem;cursor: pointer">
        <!--<div><span>金雕</span></div>-->
        <div v-for="(item,index) in fbList" :key="index"
             @click="qhfb(item)"
             :style="item.sts?'opacity: 1;':'opacity: .6'">
          <img :src="item.ico" alt=""><span>{{item.name}}</span>
        </div>
      </div>
      <!--分布类型 E-->

      <!--tab切换 B-->
      <div class="qhtab" style="top: 1.6rem;left: .34rem">
        <div v-for="(item,index) in navList" :key="index" @click="datamap(item.type)">
          <img :src="item.sts?'/static/images/tab1.png':'/static/images/tab2.png'" alt="">
          <span style="margin-left: .08rem;">{{item.name}}</span>
        </div>
      </div>
      <!--tab切换 E-->
      <!--中间地图 B-->
      <div id="map" style="height: 85%;width: 100%;margin-top: 15%;overflow: hidden;"></div>
      <!--中间地图 E-->


    </div>
    <!--中间 E-->
    <!--右边 B-->
    <div>
      <div class="ssls">
        <!--标题 B-->
        <div class="sstitles">
          <div class="twzs">
            <span class="dwz">物种统计</span>
            <br/>
            <span class="xwz">Species statistics</span>
          </div>
        </div>
        <!--标题 E-->

        <!--统计图 B-->
        <div class="stjqy">
          <div id="pie" style="overflow: hidden"></div>
          <div style="position: relative">
            <div class="ext">
              <div></div>
              <div><span>动物统计</span></div>
            </div>
            <div id="bar1" style="width: 100%;height: 100%;"></div>
          </div>
          <div style="position: relative">
            <div class="ext">
              <div style="background-color: #FFF27F;"></div>
              <div><span>植物统计</span></div>
            </div>
            <div id="bar2" style="width: 100%;height: 100%;"></div>
          </div>
        </div>
        <!--统计图 E-->

      </div>
    </div>
    <!--右边 E-->

    <div class="zhezhao" v-if="isShow">
      <div>
        <div class="closei">
          <img style="width: 100%;height: 100%;" @click="clearLove"
               src="/static/images/guanbi.png" alt="">
        </div>
        <div class="xuanzhuan">
          <img style="width: 100%;height: 100%;" @click="xuanzhaun"
               src="/static/images/xuanzhuan.png" alt="">
        </div>

        <!--图片 B-->
        <div class="imgBox" id="imgBox">
          <img id="pcr" :src="lovePhoto" alt="">
        </div>
        <!--图片 E-->

        <!--轮播图 B-->
        <div class="lbxtimg">
          <!--左边B-->
          <div class="jianmotua">
            <img @click="rmv" src="/static/images/leftjiantou.png" alt="">
          </div>
          <!--左边E-->

          <!--l轮播图容器 B-->
          <div class="lbtbox">
            <ul class="clearfix" id="imgul" :style="{width:2.3*imglist.length+'rem' }">
              <li v-for="(item,index) in imglist" :key="index"
                  :style="item.fill?'border: 2px solid #2EFFF2;':'border:none'" @click="xbdimg(item)">
                <img :src="iscloud(item.url)" alt="">
              </li>
            </ul>
          </div>
          <!--l轮播图容器 E-->

          <!--右边B-->
          <div class="jianmotua" @click="lmv">
            <img src="/static/images/rightjainotu.png" alt="">
          </div>
          <!--右边E-->
        </div>
        <!--轮播图 E-->


      </div>
    </div>


  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import http from '../utils/http'
  import api from '../utils/api'

  export default {
    name: "bdzy",
    data() {
      return {
        keyword: "",
        navList: [
          {
            name: '功能区划',
            type: 'gnqh',
            sts: true
          },
          {
            name: '网格',
            type: 'wg',
            sts: false
          }
        ],
        fbList: [
          {
            name: "诱捕点分布",
            ico: '/static/images/red.png',
            sts: false
          },
          {
            name: "样方分布",
            ico: '/static/images/yellow.png',
            sts: false
          }
        ],
        tclist: [
          {
            ico: '/static/images/tc1.png',
            name: '调查样方(个)',
            num: 642,
            color: '#2EFFF2'
          }, {
            ico: '/static/images/tc2.png',
            name: '调查样点(个)',
            num: 385,
            color: '#FFF27F'
          }, {
            ico: '/static/images/tc3.png',
            name: '已走样线(km)',
            num: 836,
            color: '#917FFF'
          }, {
            ico: '/static/images/tc4.png',
            name: '采集数据(条)',
            num: 170,
            color: '#34CEFF'
          },
        ],
        lbList: [
          {
            name: '动物',
            type: 'animal',
            sts: true
          }, {
            name: '植物',
            type: 'plant',
            sts: false
          }, {
            name: '真菌',
            type: 'fungus',
            sts: false
          },
        ],
        listn: [],
        SpeciesType: 'animal',
        areaId: "",
        SpeciesObj: {
          zhong: ""
        },
        personNum: 0,
        surveyNum: 0,
        yfPoint: [],
        ydPoint: [],
        fbPoint: [],
        yd: [],
        yf: [],
        maptype: "gnqh",
        imglist: [],
        idx: 0,
        xz: 0,
        isShow: false,
        lovePhoto: "",
        bhqName: [],
        MapColor: [
          'rgba(203, 255, 252, 0.8)',
          'rgba(74, 239, 230, 0.8)',
          'rgba(4, 178, 169, 0.8)',
          'rgba(203, 255, 252, 0.8)',
          'rgba(114,8,82,.8)',
          'rgba(174,213,13,.8)',
          'rgba(194,133,112,.8)',
          'rgba(225,66,19,.8)',
          'rgba(94,60,190,.8)',
          'rgba(253,166,199,.8)'
        ]
      }
    },
    created() {
      this.areaId = window.sessionStorage.getItem('areaId');
      this.getpointFenbu();
      this.getdata();
      this.getbaseViewCount();
    },
    mounted() {
      this.getspeciesCount();
      let vm = this;
      (async function f() {
        let res = await http.get('/papi/' + vm.areaId + '_json/gnqh.json')
        let arr = [];
        res.data.features.forEach(t => {
          arr.push(t.properties.name)
        })
        vm.bhqName = arr;
        vm.getSpecies();
      })();
      const _that = this
      window.onresize = () => {
        return (() => {
          let maxWidth = $('#imgBox').width();
          let maxHeight = $('#imgBox').height();
          let path = $('#pcr').attr('src');
          _that.AutoSize(path, maxWidth, maxHeight);
        })()
      }
    },
    methods: {
      clearLove() {
        this.idx = 0;
        this.xz = 0;
        this.isShow = false;
      },
      xuanzhaun() {
        this.xz++;
        $("#pcr").css({transform: 'rotate(' + (this.xz * 90) + 'deg)'})
      },
      xbdimg(data) {
        this.imglist.forEach(e => {
          if (e.url == data.url) {
            e.fill = true
          } else {
            e.fill = false
          }
        })
        this.lovePhoto = data.url;
        this.xz = 0;
        $("#pcr").css({transform: 'rotate(0deg)'})
        let vm = this;
        setTimeout(function () {
          let maxWidth = $('#imgBox').width();
          let maxHeight = $('#imgBox').height();
          let path = $('#pcr').attr('src');
          vm.AutoSize(path, maxWidth, maxHeight);
        }, 500)
      },
      lmv() {
        let target = $('#imgul'), vm = this;
        if (this.idx < (this.imglist.length - 4)) {
          vm.idx++;
          target.stop().animate({left: (-vm.idx * 2.3) + .4 + "rem"}, 500)
        }
      },
      rmv() {
        let target = $('#imgul'), vm = this;
        if (this.idx > 0) {
          vm.idx--;
          target.stop().animate({left: -vm.idx * 2.3 + "rem"}, 500)
        }
      },
      AutoSize(Img, maxWidth, maxHeight) {
        let image = new Image();
        image.src = Img;
        image.onload = function () {
          if (image.width < maxWidth && image.height < maxHeight) {
            $("#pcr").css({width: image.width, height: image.height})
          } else {
            if (maxWidth / maxHeight <= image.width / image.height) {
              $("#pcr").animate({width: maxWidth, height: maxWidth * (image.height / image.width)}, 'fast');
            } else {
              $("#pcr").animate({width: maxHeight * (image.width / image.height), height: maxHeight}, 'fast');
            }
          }
        }
      },
      looki(data) {
        let vm = this;
        (async function f() {
          let res = await http.get(api.findOne + data.id)
          let item = res.data;
          if (item.photos.length < 0) {
            vm.$message({
              message: '该物种暂无图像资料,请尽快补充',
              type: 'warning'
            });
          } else {
            let arr = [];
            item.photos.forEach((e, index) => {
              if (vm.isMp4(e.address) == '照片' && index < 10) {
                let z = {
                  fill: false,
                  url: e.address
                }
                arr.push(z)
              }
            })
            if (arr.length > 0) {
              arr[0].fill = true;
              vm.lovePhoto = arr[0].url;
              vm.imglist = arr;
              setTimeout(function () {
                vm.isShow = true;
                setTimeout(function () {
                  let maxWidth = $('#imgBox').width();
                  let maxHeight = $('#imgBox').height();
                  let path = $('#pcr').attr('src');
                  vm.AutoSize(path, maxWidth, maxHeight);
                }, 500)
              }, 500)
            } else {
              vm.$message({
                message: '该物种暂无图像资料,请尽快补充',
                type: 'warning'
              });
            }
          }
        })()


      },
      isMp4(m) {
        let iv = m.split('.');
        if (iv[iv.length - 1].toLowerCase() == 'mp4') {
          return '视频'
        } else {
          return '照片'
        }
      },
      iscloud(p) {
        if (p.split(":")[0] == 'http') {
          return p + '@oosImage|150h'
        }
        if (p.split(":")[0] == 'https') {
          return p + '?x-amz-process=image/resize,h_150,m_lfit'
        }
      },
      getpointFenbu() {
        let vm = this;
        (async function f() {
          let res = await http.get(api.pointFenbu + vm.areaId)
          let yf = [];
          res.data.yangfangFenbu.forEach((t, index) => {
            if (index < 100) {
              let z = {
                value: [t.lon, t.lat]
              }
              yf.push(z)
            }
          })
          vm.yfPoint = yf;
          let yd = [];
          res.data.yangdianFenbu.forEach((t, index) => {
            if (index < 100) {
              let z = {
                value: [t.lon, t.lat]
              }
              yd.push(z)
            }
          })
          vm.ydPoint = yd;

        })()
      },
      getspeciesCount() {
        let vm = this;
        (async function f() {
          let res = await http.get(api.speciesCount + vm.areaId)
          let wuzhong = res.data.wuzhongCount
          let pie = [
            {value: wuzhong.animal, name: '动物'},
            {value: wuzhong.fungus, name: '真菌'},
            {value: wuzhong.plant, name: '植物'}
          ]
          vm.drawpie(pie);
          let a = res.data.animalFenlei;
          let bar1 = [a.gang, a.mu, a.ke, a.shu, a.zhong];
          vm.drawbar1(bar1);
          let p = res.data.plantFenlei;
          let bar2 = [p.gang, p.mu, p.ke, p.shu, p.zhong];
          vm.drawbar2(bar2);
        })()
      },
      getbaseViewCount() {
        let vm = this;
        (async function f() {
          let res = await http.get(api.baseViewCount + vm.areaId)
          vm.personNum = res.data.personNum;
          vm.surveyNum = res.data.surveyNum;
        })()
      },
      lookz(data) {
        this.listn.forEach(t => {
          t.sts = false
        })
        data.sts = true;
        this.SpeciesObj = data;
        let Point = data, fenbu = [];
        if (Point.distribution != '') {
          let arr = Point.distribution.split("#");
          arr.forEach(t => {
            let i = t.split("-");
            if (i.length > 1) {
              let z = {value: [i[0], i[1]]}
              fenbu.push(z)
            }
          })
        }
        this.fbPoint = fenbu;
        this.datamap(this.maptype);
      },
      getSpecies() {
        let _that = this;
        (async function f() {
          let res = await http.get(api.Species, {
            areaId: _that.areaId,
            type: _that.SpeciesType,
            keyword: _that.keyword
          })
          if (res.data.length > 0) {
            res.data.forEach((t, index) => {
              if (index == 0) {
                t['sts'] = true
              } else {
                t['sts'] = false
              }
            })
            _that.SpeciesObj = res.data[0];
            let Point = res.data[0], fenbu = [];
            if (Point.distribution != '') {
              let arr = Point.distribution.split("#");
              arr.forEach((t, index) => {
                if (index < 100) {
                  let i = t.split("-");
                  if (i.length > 1) {
                    let z = {value: [i[0], i[1]]}
                    fenbu.push(z)
                  }
                }
              })
            }
            _that.fbPoint = fenbu;
          }
          _that.datamap('gnqh');
          _that.listn = res.data;
        })()
      },
      getdata() {
        let _that = this;
        (async function f() {
          let res = await http.get(api.ViewCount + '?areaId=' + _that.areaId)
          _that.tclist[0].num = res.data.yangfang;
          _that.tclist[1].num = res.data.yangdian;
          _that.tclist[2].num = res.data.yangxianDistance;
          _that.tclist[3].num = res.data.dataNum;
        })()
      },
      drawpie(data) {
        let myChart = echarts.getInstanceByDom(document.getElementById('pie'));
        if (myChart == null) {
          myChart = echarts.init(document.getElementById('pie'));
        }
        let option = {
          color: ['#7FFFFF', '#FFF27F', '#917FFF'],
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center',
            textStyle: {
              fontSize: 14,//字体大小
              color: "#fff"
            },
            // data: ['动物', '植物', '真菌']
          },
          series: [
            {
              name: '统计',
              type: 'pie',
              center: ['50%', '60%'],
              radius: ['40%', '66%'],
              avoidLabelOverlap: false,
              labelLine: {
                show: true
              },
              label: {
                color: '#fff',
                fontSize: 14,
                formatter: function (parmas) {
                  if (parmas.name == '动物') {
                    return parmas.name + '  ' + '{dw|' + parmas.value + '}'
                  }
                  if (parmas.name == '植物') {
                    return parmas.name + '  ' + '{zw|' + parmas.value + '}'
                  }
                  if (parmas.name == '真菌') {
                    return parmas.name + '  ' + '{zj|' + parmas.value + '}'
                  }
                },
                rich: {
                  dw: {
                    color: '#7FFFFF',
                    fontSize: 14
                  },
                  zw: {
                    color: '#FFF27F',
                    fontSize: 14
                  },
                  zj: {
                    color: '#917FFF',
                    fontSize: 14
                  }
                },
              },
              data: data
            }
          ]
        };
        myChart.setOption(option);
        setTimeout(function () {
          myChart.resize();
        }, 100);
        window.addEventListener('resize', function () {
          myChart.resize();
        })
      },
      drawbar1(data) {
        let myChart = echarts.getInstanceByDom(document.getElementById('bar1'));
        if (myChart == null) {
          myChart = echarts.init(document.getElementById('bar1'));
        }
        let option = {
          xAxis: {
            type: 'category',
            axisLabel: {
              textStyle: {
                color: "#fff"
              }
            },
            data: ['纲', '目', '科', '属', '种'],
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: "#fff"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.1)'
              }
            }
          },
          grid: {
            top: '20%',
            left: '10%',
            right: "1%",
            bottom: "10%"
          },
          series: [
            {
              data: data,
              type: 'bar',
              showBackground: true,
              label: {
                show: true,
                position: 'top',
                color: '#fff'
              },
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: 'rgba(46, 255, 242, .1)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(46, 255, 242, 1)'
                    }
                  ])
                }
              },
              backgroundStyle: {
                color: 'rgba(255, 255, 255, 1)',
                opacity: .1
              }
            }
          ]
        };
        myChart.setOption(option);
        setTimeout(function () {
          myChart.resize();
        }, 100);
        window.addEventListener('resize', function () {
          myChart.resize();
        })
      },
      drawbar2(data) {
        let myChart = echarts.getInstanceByDom(document.getElementById('bar2'));
        if (myChart == null) {
          myChart = echarts.init(document.getElementById('bar2'));
        }
        let option = {
          xAxis: {
            type: 'category',
            axisLabel: {
              textStyle: {
                color: "#fff"
              }
            },
            data: ['纲', '目', '科', '属', '种'],
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: "#fff"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.1)'
              }
            }
          },
          grid: {
            top: '20%',
            left: '10%',
            right: "1%",
            bottom: "10%"
          },
          series: [
            {
              data: data,
              type: 'bar',
              showBackground: true,
              label: {
                show: true,
                position: 'top',
                color: '#fff'
              },
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: 'rgba(46, 255, 242, .1)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(46, 255, 242, 1)'
                    }
                  ])
                }
              },
              backgroundStyle: {
                color: 'rgba(255, 255, 255, 1)',
                opacity: .1
              }
            }
          ]
        };
        myChart.setOption(option);
        setTimeout(function () {
          myChart.resize();

        }, 100);
        window.addEventListener('resize', function () {
          myChart.resize();
        })
      },
      datamap(flag) {
        this.maptype = flag;
        this.navList.forEach(e => {
          if (flag == e.type) {
            e.sts = true
          } else {
            e.sts = false
          }
        })
        if (flag == 'gnqh') {
          let url = '/papi/' + this.areaId + '_json/gnqh.json';
          let jsondata = []
          this.bhqName.forEach((c, x) => {
            jsondata.push(
              {
                name: c,
                value: 1,
                label: {
                  show: false,
                },
                itemStyle: {
                  show: true,
                  areaColor: this.MapColor[x],
                  borderColor: this.MapColor[x],
                  borderWidth: "1"
                },
              }
            )
          });
          let geo = {
            type: "map",
            map: 'GeoJson',
            regions: jsondata,
            zoom: 1.1,
            show: true,
            roam: true,
          };
          this.map(url, geo, this.fbPoint, this.yd, this.yf)
        }
        if (flag == 'wg') {
          let geo = {
            map: 'GeoJson',
            show: true,
            roam: true,
            zoom: 1.1,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                areaColor: 'rgba(4, 178, 169, 0.8)',
                borderColor: '#4AEFE6',
                borderWidth: 1,
              },
              emphasis: {},
            },
          };
          let url = '/papi/' + this.areaId + '_json/wangge.json';
          this.map(url, geo, this.fbPoint, this.yd, this.yf)
        }
      },
      map(url, geo, fenbu, yd, yf) {
        let vm = this
        let myChart = echarts.getInstanceByDom(document.getElementById("map"))
        if (myChart == null) { // 如果不存在，就进行初始化
          myChart = echarts.init(document.getElementById("map"));
        } else {
          myChart.clear();
        }
        $.getJSON(url, function (geoJson) {
          echarts.registerMap('GeoJson', geoJson);
          myChart.showLoading('default', {
            text: '加载中，请稍候...', maskColor: 'rgba(0,0,0,.3)', textColor: '#fff',
          });
          let option = {
            geo: geo,
            series: [
              {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbol: 'image:///static/images/red.png',
                legendHoverLink: true,
                symbolSize: [16, 18],
                data: yd,
                showEffectOn: 'render',
                rippleEffect: {
                  brushType: 'stroke',
                },
                hoverAnimation: true,
                zlevel: 1,
              },
              {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbol: 'image:///static/images/yellow.png',
                symbolSize: [16, 18],
                data: yf,
                showEffectOn: 'render',
                rippleEffect: {
                  brushType: 'stroke',
                },
                hoverAnimation: true,
                zlevel: 1,
              }, {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbol: 'image:///static/images/green.png',
                symbolSize: [16, 18],
                data: fenbu,
                showEffectOn: 'render',
                rippleEffect: {
                  brushType: 'stroke',
                },
                hoverAnimation: true,
                zlevel: 1,
              },
            ]
          }
          myChart.setOption(option, true);
          setTimeout(function () {
            myChart.hideLoading();
            myChart.resize();
          }, 500);
          window.addEventListener("resize", function () {
            myChart.resize();
          })
        });
      },
      filteryType(e) {
        if (e == '延庆区') {
          return 'rgba(203, 255, 252, 0.8)'
        }
        if (e == '缓冲区') {
          return 'rgba(74, 239, 230, 0.8)'
        }
        if (e == '核心区') {
          return 'rgba(4, 178, 169, 0.8)'
        }
        return 'rgba(203, 255, 252, 0.8)'
      },
      qhfb(item) {
        item.sts = !item.sts;
        let url = '', geo = {}, jsondata = [];
        if (this.maptype == 'gnqh') {
          this.bhqName.forEach((c, x) => {
            jsondata.push(
              {
                name: c,
                value: 1,
                label: {
                  show: false,
                },
                itemStyle: {
                  show: true,
                  areaColor: this.MapColor[x],
                  borderColor: this.MapColor[x],
                  borderWidth: "1"
                },
              }
            )
          });
          geo = {
            type: "map",
            map: 'GeoJson',
            regions: jsondata,
            zoom: 1.1,
            show: true,
            roam: true,
          };
          url = '/papi/' + this.areaId + '_json/gnqh.json';
        }
        if (this.maptype == 'wg') {
          geo = {
            map: 'GeoJson',
            show: true,
            roam: true,
            zoom: 1.1,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                areaColor: 'rgba(4, 178, 169, 0.8)',
                borderColor: '#4AEFE6',
                borderWidth: 1,
              },
              emphasis: {},
            },
          };
          url = '/papi/' + this.areaId + '_json/wangge.json';
        }
        if (item.sts) {
          if (item.name == '诱捕点分布') {
            this.yd = this.ydPoint
          }
          if (item.name == '样方分布') {
            this.yf = this.yfPoint
          }
        } else {
          if (item.name == '诱捕点分布') {
            this.yd = []
          }
          if (item.name == '样方分布') {
            this.yf = []
          }
        }

        this.map(url, geo, this.fbPoint, this.yd, this.yf)
      },
      qhlx(item) {
        this.lbList.forEach(e => {
          e.sts = false
        })
        item.sts = true;
        this.SpeciesType = item.type;
        this.getSpecies();
      }
    }
  }
</script>

<style scoped>
  @import "../../static/css/jbxx.css";
</style>
